import React from 'react';
import './Helpdetail.css';
import Header from '../components/Header';
import Bottom from '../components/Bottom';
import Helpcontent from './Helpcontent';
import { BrowserRouter as Router, Link, Route, Switch,NavLink } from 'react-router-dom';

const Helpdetail =()=>{
    const showItem = (e)=>{
        if(e.currentTarget.className === 'close'){
            e.currentTarget.classList.toggle('open');
            e.currentTarget.lastChild.className='open_switch'; 
            e.currentTarget.parentNode.lastChild.className='open_treenode';
        }
        else{
            e.currentTarget.classList.toggle('open');
            e.currentTarget.lastChild.className='close_switch';
            e.currentTarget.parentNode.lastChild.className='close_treenode'
        }    
    }
    return (
        <div className='help_box'>
            <Header/>
            <div className='help_content'>
                <div className='con_left'>
                    <div className='navigation_box'>
                        <Link to='/helpcenter'><div className='help_menu'>帮助中心首页</div></Link>
                        <ul>
                            <li>
                                <div onClick={showItem} className='close'>
                                    <div className='title'>新手入门</div>
                                    <div className='close_switch'></div>
                                </div>
                                <ul className='close_treenode'>
                                    <li><NavLink to='/helpdetail/helpcontent/guide_book' exact activeClassName="owner_mine_active" className="treenode">工作台使用指南</NavLink></li>
                                    <li><NavLink to='/helpdetail/helpcontent/find_resources' exact activeClassName="owner_mine_active" className="treenode">文创资源哪里找</NavLink></li>
                                </ul>
                            </li>
                            <li>
                                <div onClick={showItem} className='close'>
                                    <div className='title'>高阶教程</div>
                                    <div className='close_switch'></div>
                                </div>
                                <ul className='close_treenode'>
                                    <li><NavLink to='/helpdetail/helpcontent/recommendation' exact activeClassName="owner_mine_active" className="treenode">如何上推荐</NavLink></li>
                                </ul>
                            </li>
                            <li>
                                <div onClick={showItem} className='close'>
                                    <div className='title'>功能更新</div>
                                    <div className='close_switch'></div>
                                </div>
                                <ul className='close_treenode'>
                                    <li><NavLink to='/helpdetail/helpcontent/impressum' exact activeClassName="owner_mine_active" className="treenode">版本说明</NavLink></li>
                                    <li><NavLink to='/helpdetail/helpcontent/update_summary' exact activeClassName="owner_mine_active" className="treenode">更新汇总</NavLink></li>
                                </ul>
                            </li>
                            <li>
                                <div onClick={showItem} className='close'>
                                    <div className='title'>更多</div>
                                    <div className='close_switch'></div>
                                </div>
                                <ul className='close_treenode'>
                                    <li><NavLink to='/helpdetail/helpcontent/about_website' exact activeClassName="owner_mine_active" className="treenode">关于格物衍艺</NavLink></li>    
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                <div className='con_right'>
                    <Switch>
                        <Route exact path='/helpdetail' component={Helpcontent}></Route>
                        <Route path='/helpdetail/helpcontent' component={Helpcontent}></Route>
                    </Switch>
                </div>
            </div>
            <Bottom/>
        </div>
    )
}

export default Helpdetail;